<template>
<!-- 点击卡片后的详细信息 -->
  <div class="ChargeStation" v-if="this_chargeStation">
    <!-- 步行导航 -->
    <baidu-map class="map" :center="myposition" :zoom="14" >
        <bm-walking :start="myposition" :end="walkend" :panel="false"></bm-walking>
        <!-- 自定义定位 -->
        <bm-control :offset="offset"> 
            <i class="iconfont icon-fanhui" @click="back"></i>
        </bm-control>
    </baidu-map>
    <div class="center" >
        <div>
            <div class="name">{{this_chargeStation.name}}</div>
            <van-row class="address" type="flex">
                <van-col span="2">
                    <i class="iconfont icon-dingwei2"></i>  
                </van-col>
                <van-col span="15">
                    <span class="address_name">{{this_chargeStation.address}}</span>
                </van-col>
                <van-col span="6">
                    <div class="address_icon" @click.stop="useMap">
                        <svg t="1650544035966" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15544" width="20" height="20"><path d="M468.8384 551.9872l403.9168-405.9136-286.2592 743.168z" fill="#CAE2FF" p-id="15545"></path><path d="M582.912 938.3936c-0.8192 0-1.5872 0-2.4064-0.0512-22.9888-0.9728-42.0864-15.872-48.5888-37.9392l-94.4128-318.9248-310.9888-89.7024c-22.1184-6.4-37.12-25.344-38.2976-48.3328s11.8784-43.3664 33.2288-51.9168l730.9824-293.2736a53.0944 53.0944 0 0 1 57.1392 11.5712c15.0528 14.9504 19.7632 37.3248 12.032 57.0368L632.1664 904.704c-8.0896 20.6848-27.2384 33.6896-49.2544 33.6896zM166.9632 439.5008l291.9936 84.2752c17.4592 5.0688 30.976 18.4832 36.1472 35.8912l88.7808 299.8784 273.408-697.0368-690.3296 276.992z" fill="#5866D2" p-id="15546"></path></svg>
                        <span class="distance" v-if="distance">{{distance}}</span>
                    </div>
                </van-col>
            </van-row>
        </div>
        <!-- 价格详情 -->
        <div class="tip">
            <div style="display:flex;align-items: center;">
                <svg t="1650825464621" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2756" width="20" height="20"><path d="M656.393 206.322L255.68 608.22c-4.602 4.602-7.152 13.017-5.213 19.266l247.131 247.131c1.732-0.09 3.714-1.037 4.376-1.7l420.053-420.806c0.956-1.928 1.823-4.1 2.183-5.481l-39.089-203.034-209.74-51.493c-6.001 0-18.988 14.219-18.988 14.219z m80.2 53.753c12.797-12.798 29.812-19.845 47.91-19.845s35.113 7.048 47.91 19.845c26.418 26.418 26.418 69.402 0 95.819-12.797 12.797-29.812 19.845-47.91 19.845s-35.113-7.048-47.91-19.845c-26.418-26.417-26.418-69.402 0-95.819z m-23.156 251.324l-118.56 29.603 31.534 31.534-22.289 22.289-38.947-38.947-16.906 16.906 38.947 38.947-22.504 22.504-38.947-38.947-30.903 30.903-35.183-35.183 30.903-30.903-40.273-40.273 22.504-22.504 40.273 40.273 16.906-16.906-40.273-40.273 22.289-22.289 32.418 32.418 30.821-117.342 37.618 37.618c-17.275 51.351-16.754 72.366-23.165 87.778l88.11-22.833 35.627 35.627zM952.577 458.378c-1.707 4.962-3.879 9.017-4.847 10.691l-0.957 1.742-423.064 423.625a32.305 32.305 0 0 1-4.478 3.707l5.872 5.872c5.865 5.865 17.941 3.298 23.806-2.567l399.664-400.38s9.274-12.143 9.274-18.146l-5.27-24.544z" fill="#FCDE9E" p-id="2757"></path><path d="M97.019 584.66c-0.856-2.725-0.856-8.675 0-11.4L517.91 152.369c6.006-6.006 6.006-15.743 0-21.749-6.005-6.007-15.744-6.007-21.749 0L74.312 552.467c-7.559 7.558-8.687 19.843-8.687 26.493s1.128 18.935 8.687 26.492l281.055 281.055a15.332 15.332 0 0 0 10.875 4.505c3.936 0 7.872-1.502 10.875-4.505 6.006-6.005 6.006-15.744 0-21.749L97.019 584.66z" fill="#58A80A" p-id="2758"></path><path d="M946.772 470.811l0.957-1.742c0.968-1.674 3.14-5.729 4.847-10.691 1.313-3.817 2.352-8.17 2.352-12.391v-1.467l-46.455-241.864c-0.874-13.108-11.271-23.713-24.456-24.862l-231.405-61.296h-2c-11.96 0-20.968 8.579-23.034 10.703L192.604 563.517c-5.417 5.417-9.187 13.136-10.345 21.228-1.43 9.993 1.354 19.273 7.637 25.556l286.963 286.853c5.162 5.162 12.435 7.786 20.476 7.786h0.003c7.686 0 15.631-2.463 21.894-6.797a32.376 32.376 0 0 0 4.478-3.707l423.062-423.625zM214.368 585.28l435.077-436.328-0.033 0.06 0.21-0.236c0.275-0.259 0.626-0.541 0.971-0.788l227.714 60.217 6.814 35.392 39.089 203.034c-0.359 1.381-1.227 3.552-2.183 5.481L501.975 872.916c-0.662 0.663-2.644 1.61-4.376 1.7L250.467 627.485l-37.826-37.826c0.079-1.323 0.825-3.478 1.727-4.379z" fill="#58A80A" p-id="2759"></path><path d="M784.503 344.981c9.882 0 19.173-3.848 26.161-10.836 14.424-14.425 14.424-37.895 0-52.32-6.988-6.988-16.278-10.836-26.161-10.836-9.882 0-19.173 3.848-26.161 10.837-14.424 14.425-14.424 37.895 0 52.32 6.988 6.987 16.279 10.835 26.161 10.835z" fill="#FFFFFF" p-id="2760"></path><path d="M784.503 375.739c18.098 0 35.113-7.048 47.91-19.845 26.418-26.417 26.418-69.402 0-95.819-12.797-12.797-29.812-19.845-47.91-19.845s-35.113 7.048-47.91 19.845c-26.418 26.417-26.418 69.402 0 95.819 12.797 12.797 29.813 19.845 47.91 19.845z m-26.16-93.914c6.988-6.988 16.278-10.837 26.161-10.837 9.882 0 19.173 3.848 26.161 10.836 14.424 14.425 14.424 37.895 0 52.32-6.988 6.988-16.278 10.836-26.161 10.836-9.882 0-19.173-3.848-26.161-10.836-14.424-14.424-14.424-37.894 0-52.319zM612.864 410.826l-37.618-37.618-30.821 117.342-32.418-32.418-22.289 22.289 40.273 40.273-16.905 16.906-40.273-40.273-22.504 22.504 40.273 40.273-30.903 30.903 35.183 35.183 30.903-30.903 38.947 38.947 22.504-22.504-38.947-38.947 16.906-16.906 38.947 38.947 22.289-22.289-31.534-31.534 118.56-29.603-35.627-35.627-88.11 22.833c6.41-15.412 5.889-36.427 23.164-87.778z" fill="#58A80A" p-id="2761"></path></svg>
                <span class="common">价格详情</span>
            </div>
            <van-row type="flex" class="price">
                <!-- 在社区 -->
                <van-col span="7" v-if="is_community" style="font-weight: 800;">￥{{this_chargeStation.charge_price_cheap}}</van-col> 
                <!-- 不在社区 -->
                <van-col span="7" v-else style="font-weight: 800;">￥{{this_chargeStation.charge_price}}</van-col>
                <van-col span="11" class="cheap" :class="[ is_community ? '' : 'noshow' ]">已降{{(this_chargeStation.charge_price - this_chargeStation.charge_price_cheap).toFixed(4)}}</van-col>
                <van-col span="6" >
                    <!-- <span class="free">闲{{this_chargeStation.charge_station_all-this_chargeStation.charge_station_use}}</span>
                    <span class="all">共{{this_chargeStation.charge_station_all}}</span> -->
                </van-col>
            </van-row>
            <!-- <div class="common_text">{{this_chargeStation.tel}}</div> -->
        </div>
        <!-- 电位详情 -->
        <div class="tip">
            <div style="display:flex;align-items: center;">
                <svg t="1650813373868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10580" width="20" height="20"><path d="M575 528.77h-86.92l46-122.7c2.55-5.1 0-10.22-2.56-12.77a14 14 0 0 0-12.78-7.67h-61.33c-5.11 0-12.78 5.11-12.78 10.22l-71.57 186.6c-2.56 5.1 0 10.22 2.56 12.77a14 14 0 0 0 12.78 7.67h74.12l-66.45 176.37c0 2.56 0 5.11 2.55 5.11h7.67l181.48-230c5.11-5.12 5.11-10.23 2.55-15.34-5.11-7.71-10.22-10.26-15.32-10.26zM312 214h340v100H312z" fill="#38B487" p-id="10581"></path><path d="M880.46 167.14a25 25 0 1 0-36.92 33.72L911 274.7v440.21a20.09 20.09 0 0 1-40.18 0V472.09a70.18 70.18 0 0 0-70.1-70.09H782V172a80 80 0 0 0-80-80H262a80 80 0 0 0-80 80v653.33h-29.15A50.86 50.86 0 0 0 102 876.19v48.86a20.28 20.28 0 0 0 20.28 20.28h719.44A20.28 20.28 0 0 0 862 925.05v-48.86a50.86 50.86 0 0 0-50.85-50.86H782V452h18.72a20.12 20.12 0 0 1 20.1 20.09v242.82a70.09 70.09 0 0 0 140.18 0V255.3zM232 825.33V172a30 30 0 0 1 30-30h440a30 30 0 0 1 30 30v653.33z" fill="#38B487" p-id="10582"></path></svg>
                <span class="common">电位详情</span>
            </div>
            <div class="price">
                <div class="all_station">
                    <span class="free">闲{{this_chargeStation.charge_station_all-this_chargeStation.charge_station_use}}</span>
                    <span class="all">共{{this_chargeStation.charge_station_all}}</span>
                </div>
                <div class="station">
                    <div  v-for="(i,k) in this_chargeStation.charge_station_status" :key="k">
                        <div class="round" v-if="i"></div>
                        <div class="round" style="background: white" v-else @click="choose(k)"></div>
                    </div>
                </div>
                <div class="explain">
                    <div class="explain_item">
                        <div class="round"></div>
                        <p>已占用电位</p>
                    </div>
                    <div class="explain_item">
                        <div class="round" style="background: white"></div>
                        <p>空闲点位，可点击充电或预约</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 充电或预约模态框 -->
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
        <!-- 充电或预约时长选择 -->
        <van-popup v-model="show1" round>
            <van-picker
                show-toolbar
                title="充电时长选择"
                :columns="columns"
                @confirm="onConfirm"
                @cancel="show1 = false"
            />
        </van-popup>
        <van-popup v-model="show2" round>
            <van-picker 
                show-toolbar 
                title="预约和充电时长选择"
                :columns="columns1" 
                @confirm="onConfirm"
                @cancel="show2 = false"
            />
        </van-popup>
        <!-- 电话 -->
        <div class="tip" v-if="this_chargeStation.tel">
            <i class="iconfont icon-dianhua"></i>
            <span class="common">联系电话</span>
            <div class="common_text">{{this_chargeStation.tel}}</div>
        </div>
    </div>
    <!-- 底部收藏 -->
    <div class="bottom">
        <!-- <van-tabbar active-color="#ee0a24" inactive-color="#7d7e80" :active = "active">
            <van-tabbar-item class="iconfont icon-shoucang1" @click="addlove">收藏</van-tabbar-item>
        </van-tabbar> -->
        <div v-if="active" @click="addlove">

            <van-grid :column-num="3" :border="false" >
                <van-grid-item />
                <van-grid-item text="收藏" >
                    <template #icon >
                        <svg t="1651336629279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2110" width="20" height="20"><path d="M913.92 208.384c-98.816-98.816-258.56-98.816-357.376 0l-41.984 41.984-41.984-41.984c-98.816-98.816-258.56-98.816-357.376 0-98.304 98.816-98.304 258.56 0.512 357.376l52.224 52.224 337.408 337.408c5.632 5.632 14.336 5.632 19.968 0l337.408-337.408 52.224-52.224c97.792-98.816 97.792-258.56-1.024-357.376z" fill="#bfbfbf" p-id="2111"></path></svg>
                    </template>
                </van-grid-item>
                <van-grid-item />
            </van-grid>
        </div>
        <div v-else @click="addlove">
            <van-grid :column-num="3" :border="false" >
                <van-grid-item />
                <van-grid-item text="收藏" >
                    <template #icon >
                        <svg t="1651337898742" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2505" width="20" height="20"><path d="M913.92 208.384c-98.816-98.816-258.56-98.816-357.376 0l-41.984 41.984-41.984-41.984c-98.816-98.816-258.56-98.816-357.376 0-98.304 98.816-98.304 258.56 0.512 357.376l52.224 52.224 337.408 337.408c5.632 5.632 14.336 5.632 19.968 0l337.408-337.408 52.224-52.224c97.792-98.816 97.792-258.56-1.024-357.376z" fill="#FC053B" p-id="2506"></path></svg>
                    </template>
                </van-grid-item>
                <van-grid-item />
            </van-grid>
        </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import {bd09towgs84} from '@/tool';
// import {nowTime} from '@/tool';
// import {get_chargeStationby_id,change_chargeStationby_id,post_order,get_loveStation} from '@/api/index';
import {get_chargeStationby_id,change_chargeStationby_id,post_order,get_loveStation,post_loveStation,cancel_loveStation} from '@/api/index';
export default {
  name: 'ChargeStation',
  components: {
  },
  props:[],
  data(){
        return{
            active: 1,
            count: 0, //点击收藏次数
            // is_community:false,
            this_chargeStation:null,
            myposition:{lng: 0, lat: 0}, //我的位置
            walkend:{lng: 0, lat: 0},
            distance:null,
            offset:{width: 10,height: 10},
            show: false,    // 充电或预约模态框
            show1: false,   // 充电时长选择模态框
            show2: false,   // 预约时长选择模态框
            actions: [{ name: "立即充电" }, { name: '预约充电' }],
            xuhao:null,    //序号对应表的charge_station_status列
            ac_name: null, //选择的actions的name
            columns: [{ text:'充电时长',disabled: true},'5分钟', '15分钟', '30分钟', '40分钟', '1小时', '1小时30分钟', '2小时'], //立即充电时长
            columns1: [
                // 预约时长 //最多预约半天
                {
                values: [{ text:'预约时长',disabled: true}, '1分钟', '30分钟', '1小时', '2小时','3小时','4小时','5小时','6小时','7小时','8小时','9小时','10小时','11小时','12小时'],
                defaultIndex: 0,
                },
                // 充电时长
                {
                values: [{ text:'充电时长',disabled: true},'1分钟', '5分钟', '15分钟', '30分钟', '40分钟', '1小时', '1小时30分钟', '2小时'],
                defaultIndex: 0,
                },
            ],
            choose_time:null, //选择的充电时间
        } 
    },
    computed:{
        adminuser(){
            return this.$store.state.adminuser;
        },
        areaMsg(){
            return this.$store.state.areaMsg;
        },
        is_community(){
            if(Object.keys(this.areaMsg).length){
                console.log(this.areaMsg.community);
                console.log(this.this_chargeStation.community);
                if(this.areaMsg.community == this.this_chargeStation.community) return true;
                return false
            }
            else return false
        }
    },
    async created(){
       let res = await get_chargeStationby_id(this.$route.query.charge_id);
       let this_chargeStation = res.data;
       let charge_station_status = this_chargeStation.charge_station_status.split("");
       charge_station_status = charge_station_status.map( item => Number(item));
       this.this_chargeStation = {...this_chargeStation,charge_station_status};
       let myposition = { lng:this.$route.query.lng, lat:this.$route.query.lat}
       this.myposition = {...myposition};
       let walkend = {lng:this.this_chargeStation.lng, lat:this.this_chargeStation.lat};
       this.walkend = {...walkend};
       this.distance = this.$route.query.distance;
       if(this.adminuser){

           let res2 = await get_loveStation(this.adminuser)
           if(res2){
               res2 = res2.data
               let islove = res2.findIndex(item => item.charge_id == this.$route.query.charge_id)
            //    console.log(islove);
            //    console.log("111",this.active);
               if(islove != -1){
                   this.active = 0;
               } 
            //    console.log("111",this.active);
           }
       }
    },
    watch:{
        // 根据充电还是预约显示不同组件
        ac_name(n){
            if(n == '立即充电'){
                this.show1 = true;
                this.ac_name = null;
            }
            if(n == '预约充电'){
                this.show2 = true;
                this.ac_name = null;
            }
        }
    },
    methods:{
        useMap(){
            let end = bd09towgs84(this.walkend)
            let start = bd09towgs84(this.myposition)
            if(window.plus){
                // 设置目标位置坐标点和其实位置坐标点
                var dst = new plus.maps.Point(end.lng,end.lat);   //目的地
                var src = new plus.maps.Point(start.lng,start.lat);   //起始地
                // 调用系统地图显示
                plus.maps.openSysMap( dst, this.this_chargeStation.name , src );
            }
            
        },
        back(){
            this.$router.go(-1);
        },
        // 充电或预约模态框
        choose(xuhao){
            if(this.adminuser){
                this.show = true;
                this.xuhao = xuhao;
            }
            else{
                this.$router.push({ path: 'my'})
            }
        },
        async addlove(){
            if(this.adminuser){
                this.count++;
                //点击一次
                if(this.count%2){
                    if(this.active == 0){
                        //已经收藏
                        await cancel_loveStation(this.$route.query.charge_id)
                        this.active = 1;
                        this.$toast('取消收藏');
                    }
                    else{
                        //未收藏
                        await post_loveStation({
                            person: this.adminuser,
                            charge_id: this.$route.query.charge_id
                        })
                        this.active = 0;
                        this.$toast('收藏成功');
                    }
                } 
                //点击两次
                else{
                    if(this.active == 0){
                        //变成取消收藏
                        await cancel_loveStation(this.$route.query.charge_id)
                        this.active = 1;
                        this.$toast('取消收藏');
                    }
                    else{
                        //取消收藏变成已收藏
                        await post_loveStation({
                            person: this.adminuser,
                            charge_id: this.$route.query.charge_id
                        })
                        this.active = 0;
                        this.$toast('收藏成功');
                    }
                }
                
            }
            else{
                this.$router.push({ path: 'my'})
            }
        },
        onSelect(item) {
            this.show = false;
            this.ac_name = item.name;
            //立即充电先选择充电时长    //预约充电先选择充电时长和预约时间
            //会先跳到支付界面后面再写
            
            //立即充电界面         //预约倒计时界面
        },
        async onConfirm(value, index) {
            // console.log(`当前值：${value}, 当前索引：${index}`);
            // 传给数据库改变充电状态
            this.this_chargeStation.charge_station_status = this.this_chargeStation.charge_station_status.map((item,index) => {
                if(index == this.xuhao) item = 1;
                return item;
            })
            let charge_station_status = this.this_chargeStation.charge_station_status.join("");
            console.log(charge_station_status);
            await change_chargeStationby_id(this.$route.query.charge_id,charge_station_status)
            //下单时间
            // let buyTime = nowTime();
            let buyTime = moment().format('YYYY-MM-DD HH:mm:ss');
            // console.log("buyTime",buyTime);
            if(value instanceof Array){
                //为真是预约确认 type:1item.charge_id
                //预约完成时间也是开始充电时间
                let start_time 
                if(value[0] == '30分钟') start_time = moment().add(30, 'minutes').format('YYYY-MM-DD HH:mm:ss');
                else if(value[0] == '1分钟') start_time = moment().add(1, 'minutes').format('YYYY-MM-DD HH:mm:ss');
                else{
                    let t = value[0].substring(0,(value[0].indexOf('小')))
                    start_time = moment().add(t, 'hours').format('YYYY-MM-DD HH:mm:ss');
                }
                //充电完成时间
                let finishTime
                if(value[1] == '1小时') finishTime = moment(start_time).add(1, 'hours').format('YYYY-MM-DD HH:mm:ss');
                else if(value[1] == '1小时30分钟') finishTime = moment(start_time).add(30, 'minutes').add(1, 'hours').format('YYYY-MM-DD HH:mm:ss');
                else if(value[1] == '2小时') finishTime = moment(start_time).add(2, 'hours').format('YYYY-MM-DD HH:mm:ss');
                else{
                    let t = value[1].substring(0,(value[1].indexOf('分')))
                    finishTime = moment(start_time).add(t, 'minutes').format('YYYY-MM-DD HH:mm:ss');
                }
                /* console.log("buyTime",buyTime);
                console.log("start_time",start_time);
                console.log("finishTime",finishTime); */

                let choose_time = {type: 1, value, index, xuhao:this.xuhao, buyTime, start_time, finishTime, charge_id: this.$route.query.charge_id}
                this.choose_time = {...choose_time}
                this.show2 = false;
                //会先跳到支付界面后面再写
                this.$store.commit('changechoose_time', {choose_time})
                await post_order({
                    charge_id: this.$route.query.charge_id,
                    person: this.adminuser, 
                    type: 1,
                    buyTime,
                    start_time,
                    finishTime,
                    xuhao:this.xuhao
                })
                this.$router.push({ path: 'chargeing', query: { charge_id: this.$route.query.charge_id, lat: this.myposition.lat,lng: this.myposition.lng, distance: this.distance }})
            }
            else{
                //直接充电确认 type:0
                //充电完成时间
                let finishTime
                if(value == '1小时') finishTime = moment().add(1, 'hours').format('YYYY-MM-DD HH:mm:ss');
                else if(value == '1小时30分钟') finishTime = moment().add(30, 'minutes').add(1, 'hours').format('YYYY-MM-DD HH:mm:ss');
                else if(value == '2小时') finishTime = moment().add(2, 'hours').format('YYYY-MM-DD HH:mm:ss');
                else{
                    let t = value.substring(0,(value.indexOf('分')))
                    finishTime = moment().add(t, 'minutes').format('YYYY-MM-DD HH:mm:ss');
                }
                // console.log("finishTime",finishTime);
                // let finishTime = moment().add(7, 'minutes');
                let choose_time = {type: 0, value: [value], index: [index], xuhao: this.xuhao, buyTime, finishTime, charge_id: this.$route.query.charge_id}
                this.choose_time = {...choose_time}
                this.show1 = false;
                //会先跳到支付界面后面再写
                //更改数据库电桩状态
                //跳转路由展示充电或者预约界面
                this.$store.commit('changechoose_time', {choose_time})
                await post_order({
                    charge_id: this.$route.query.charge_id,
                    person: this.adminuser, 
                    type: 0,
                    buyTime,
                    finishTime,
                    xuhao:this.xuhao
                })
                this.$router.push({ path: 'chargeing', query: { charge_id: this.$route.query.charge_id, lat: this.myposition.lat,lng: this.myposition.lng, distance: this.distance }})
            }
            
            
        },
        
    }
}
</script>

<style lang="less" scoped>
 .ChargeStation{
     text-align: left;
     .icon-shoucang1:before {
        content: "\e66f";
        font-size: 20px;
    }
    .map {
        width: 100%;
        height: 30vh;
        .icon-fanhui:before {
            content: "\e62b";
            font-size: 27px;
            color: #312f2f91;
        }
    }
    .bottom{
        .van-grid-item {
            position: relative;
            box-sizing: border-box;
            height: 50px;
        }
    }
    .center{
         height: 56.5vh;
        margin: 10px;
        padding: 10px;
        border-radius: 10px;
        background-color: white;
        overflow-y: scroll;
        .tip{
            padding: 10px 0;
            .round{
                width: 15px;
                height: 15px;
                background: #38b487;
                border-radius: 50%;
                box-shadow: 0 0 3px 2px #38b487;
            }
            .common{
                font-weight: 600;
                margin-left: 10px;
            }
            .common_text{
                margin-top: 10px;
            }
            .price{
                padding: 15px 5px;
                background-color: #f9f9f9e6;
                border-radius: 5px;
                margin-top: 10px;
                .station{
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;
                    margin: 20px 0;
                }
                .cheap{
                    font-size: 12px;
                    color: #38b487;
                    // align-self: flex-end;
                }
                .noshow{
                    visibility: hidden;
                }
                .all_station{
                    border: 1px solid #38b487;
                    border-radius: 5px;
                    font-size: 13px;
                    text-align: center;
                    display: flex;
                    color: #38b487;
                    width: 20%;
                    .free{
                        background-color: #38b487;
                        border-radius: 5px;
                        width: 50%;
                        color: white;
                    }
                    .all{
                        width: 50%;
                    }
                }
                .explain{
                    margin-top: 5px;
                    .explain_item{
                        display: flex;
                        align-items: center;
                        padding-left: 5px;
                        font-size: 13px;
                        p{
                            margin-block-start: 5px;
                            margin-block-end: 5px;
                            margin-left: 5px;
                        }
                    }
                }
            }
        }
        .name{
            font-weight: 600;
        }
        .address{
            font-size: 15px;
            height: 40px;
            margin-top: 10px;
            background-color: #f9f9f9e6;
            padding: 6px;
            border-radius: 5px;
            .address_icon{
                display: flex;
                padding: 5px;
                border: 1px solid #5866d2;
                border-radius: 25px;
                justify-content: space-evenly;
                align-items: center;
                width: 90%;
                margin-left: 10%;
                .distance{
                    font-size: 13px;
                    color: #5866d2;
                }
            }
            .van-col--16 {
                width: 66.66666667%;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
        .van-row--flex {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
    }
 }
</style>